<script lang="ts" setup>
  import type { Prescription } from '@/types/room'

  defineProps<{
    prescription?: Prescription
  }>()

  // 获取处方状态文字
  const getStatusText = (status?: number) => {
    const statusMap: Record<string, string> = {
      '1': '未付款',
      '2': '已付款',
      '3': '已失效',
    }
    return statusMap[status?.toString() || '1']
  }

  // 获取状态类名
  const getStatusClass = (status?: number) => {
    return {
      'status-1': status === 1,
      'status-2': status === 2,
      'status-3': status === 3,
    }
  }
</script>

<template>
  <view class="prescription-card">
    <!-- 处方内容 -->
    <view class="prescription-content">
      <view class="card-header">
        <text class="title">电子处方</text>
        <text class="view-btn">查看处方 ></text>
      </view>
      <view class="card-body">
        <!-- 开方时间 -->
        <view class="prescription-time"> 开方时间：{{ prescription?.createTime }} </view>

        <!-- 患者信息 -->
        <view class="patient-info">
          <view class="basic-info">
            <text class="name">{{ prescription?.name }}</text>
            <text class="gender-age"
              >{{ prescription?.gender === 1 ? '男' : '女' }} {{ prescription?.age }}岁</text
            >
          </view>
          <text class="symptom">身体不适，请按照处方治疗?</text>
        </view>

        <view class="medicine-list">
          <view
            class="medicine-item"
            v-for="medicine in prescription?.medicines"
            :key="medicine.id"
          >
            <view class="medicine-name">{{ medicine.name }}</view>
            <view class="medicine-usage">
              <text>{{ medicine.specs }}</text>
              <text class="divider">|</text>
              <text>{{ medicine.usageDosag }}</text>
            </view>
            <view class="medicine-quantity">
              <text>x{{ medicine.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
      <navigator class="uni-link" hover-class="none" :url="`/subpkg_medicine/payment/index`">
        购买药品
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
  .prescription-card {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 20rpx;
    padding: 30rpx;

    .prescription-content {
      background-color: #f8f8f8;
      border-radius: 16rpx;
      padding: 20rpx;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1px solid #e5e5e5;

        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #121826;
        }

        .view-btn {
          font-size: 26rpx;
          color: #16c2a3;
        }
      }

      .card-body {
        .prescription-time {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 20rpx;
        }

        .patient-info {
          padding-bottom: 20rpx;
          margin-bottom: 20rpx;
          border-bottom: 1px solid #e5e5e5;

          .basic-info {
            margin-bottom: 10rpx;

            .name {
              font-size: 32rpx;
              color: #121826;
              margin-right: 20rpx;
            }

            .gender-age {
              font-size: 28rpx;
              color: #6f6f6f;
            }
          }

          .symptom {
            font-size: 28rpx;
            color: #6f6f6f;
            display: block;
          }
        }

        .medicine-list {
          .medicine-item {
            margin-bottom: 20rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .medicine-name {
              font-size: 30rpx;
              color: #121826;
              margin-bottom: 8rpx;
            }

            .medicine-usage {
              font-size: 26rpx;
              color: #666;
              margin-bottom: 8rpx;

              .divider {
                margin: 0 10rpx;
                color: #ddd;
              }
            }

            .medicine-quantity {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
</style>
